<template>
  <page-header-wrapper :title="false">
    <div class="Role">
      <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>
      <typicalSearch ref="insideSearch" :searchConfig="searchConfig" @searchMethod="getTableData"></typicalSearch>
      <div class="table">
        <div class="tableTitle">
          <div class="title">充电用户管理</div>
        </div>
        <div class="tableList">
          <typicalTable
            ref="insideTable"
            :tableConfig="tableConfig"
            :tableData="tableData"
            @getTableData="getTableData"
          >
          </typicalTable>
        </div>
      </div>
    </div>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment';
import typicalSearch from '@/components/typicalSearch';
import typicalTable from '@/components/typicalTable';

import { listUsers } from '@/api/system';
export default {
  name: 'ChargingUser',
  components: {
    typicalSearch: typicalSearch,
    typicalTable: typicalTable
  },
  data() {
    return {
      formButtonDisableFlag: false, // 表单确定禁用按钮 防止多次点击多次保存
      editWaitForLoading: false, // 加载编辑回显数据等待Loading
      roleLoading: false, // 加载表格的loading
      // 搜索组件配置
      searchConfig: {
        formItemList: [
          // {
          //   type: 'input',
          //   prop: 'searchName',
          //   value: '',
          //   label: '客户姓名'
          // },
          {
            type: 'input',
            prop: 'searchMobile',
            value: '',
            label: '手机号'
          }
        ],
        parent: this
      },
      // 列表组件配置
      tableConfig: {
        columns: [
          {
            title: '客户姓名',
            dataIndex: 'name',
            ellipsis: true
          },
          {
            title: '手机号',
            dataIndex: 'mobile',
            ellipsis: true
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            ellipsis: true,
            customRender: this.formatterTime
          }
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this
      },
      // 列表组件数据
      tableData: {
        records: [],
        total: 0
      }
    };
  },
  created() {
  },
  mounted() {
    this.$refs.insideSearch.searchInfo();
  },
  methods: {
    /**
     * [getTableData 获取表格数据]
     * @param  {[type]} searchParam [搜索条件]
     * @return {[type]}             [description]
     */
    getTableData(searchParam) {
      if (!searchParam) throw new Error('getTableData 没有入参搜索条件！');
      this.roleLoading = true;
      let params = {
        pageNum: searchParam.pageNumber + 1,
        pageSize: searchParam.pageSize,
        mobile: searchParam.searchMobile ? searchParam.searchMobile :""
      };
      listUsers('/selectChargeUserList','get',params).then(res => {
        if (res.code == 200 && res.data.records) {
          this.tableData = res.data;
        } else {
          this.tableData.records = [];
          this.tableData.total = 0;
        }
      }).finally(() => {
        this.roleLoading = false;
      });
    },
    formatterTime(val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';
    }
  }
};
</script>

<style lang="less" scoped>
.Role {
  width: 100%;
  height: calc(100vh - 150px);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  .position {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .table {
    flex: 1;
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .tableTitle {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ececec;
      padding: 0 20px;
      margin-bottom: 10px;
      .title {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 550;
      }
      .addButton {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .tableList {
      // max-height: calc(100vh - 380px);
      // overflow: auto;
      /deep/ .tableScroll {
        max-height: calc(100vh - 380px);
        overflow: auto;
      }
    }
  }
}
#modalContent {
  width: 100%;
  height: 300px;
  position: relative;
  .formAspin {
    position: absolute;
    width: 100%;
    height: 300px;
    background: #ececec;
    border-radius: 4px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
